<!doctype html>
<html lang="en">
<head>
  <title>GET VIDEO</title>
  <meta charset="utf-8">
<!--  <script src="{{ url_for('static', filename='js/jquery-1.7.1.min.js') }}"></script>-->
  <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="monitor" style="width:850px;height: 620px;">
  <input type="button" id="open" onclick="getMedia()"
         style="position: relative;margin-left: 5px;margin-top: 5px;visibility: hidden">
  <video id="video" width="800px" height="600px" autoplay="autoplay" style="display: none "></video>
  <canvas id="canvas" width="800px" height="500px"></canvas>

</div>



<script>
  let room="301";
  console.log(room);

  setTimeout(function() {
    // IE
    if(document.all) {
      document.getElementById("open").click();
    }
    // 其它浏览器
    else {
      var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      document.getElementById("open").dispatchEvent(e);
    }
  }, 0);
  //获得video摄像头区域
  let video = document.getElementById("video");
  function getMedia() {
    let constraints = {
      video: {width: 800, height: 600},
      audio: true
    };
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then(function (MediaStream) {
      video.srcObject = MediaStream;
      video.play();
    }).catch(function (PermissionDeniedError) {
      console.log(PermissionDeniedError);
    })

    /*定时捕获图片并上传至服务段*/
    let catch24f_ps=window.setInterval(takePhoto,41.67);
    let upload_ps=window.setInterval(uploadImage,41.67);
  }

  function takePhoto() {
    //获得Canvas对象
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 800, 600);
  }
  //图片上传到服务器
  //获取Canvas的编码
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  function uploadImage(){
    canvas.width = 800;
    canvas.height = 600;
    context.drawImage(video, 0, 0, 800, 600);
    var imgData = canvas.toDataURL("image/jpg");
    var formData = new FormData();
    formData.append('photoBase64', imgData);
    formData.append('roomId',room);
    // console.log(canvas);
    var uploadAjax = $.ajax({
      type: "post",
      //后端需要调用的地址
      url:"http://localhost:8080/uploadPhoto",
      data: formData,
      contentType:false,
      processData:false,
      //设置超时
      timeout:10000,
      async: false,
      success: function (htmlVal) {
        //成功后回调
      },
      error: function(data) {
      },
      //调用执行后调用的函数
      complete: function (XMLHttpRequest, textStatus) {
        if(textStatus == 'timeout'){
          uploadAjax.abort(); //取消请求
          //超时提示：请求超时，请重试
          alert("请求超时，请重试")
          //请求超时返回首页
          closeCard();
        }
      }
    });
  }

  function closeMedia() {
    var video = document.getElementById('video');
    if (!video.srcObject) return
    let stream = video.srcObject
    let tracks = stream.getTracks();
    tracks.forEach(track => {
      track.stop()
    })
  }

</script>
</body>
</html>
